<template>
	<view class="template-product tn-safe-area-inset-bottom">

		<!-- 顶部自定义导航 -->
		<view class="tn-navbg" :style="{height: vuex_custom_bar_height + 'px'}">
			<!-- 顶部自定义导航 -->
			<tn-nav-bar fixed customBack :bottomShadow="false">
				<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
					<text class='icon tn-icon-left'></text>
					<text class='icon tn-icon-home-capsule-fill'></text>
				</view>
				<view class="tn-flex tn-flex-col-center tn-flex-row-evenly">
					<text class="tn-color-black tn-text-bold">错题记录</text>
				</view>
			</tn-nav-bar>
		</view>
		<!-- 顶部自定义导航结束 -->

		<!-- 试题列表开始 -->
		<view class="tt-exam-container">
			<view class="">
				<block v-for="(item, index) in examList">
					<view class="tn-margin-bottom-sm tn-padding tn-bg-white">
						<view class="tn-border-solids-bottom">
							<view class="tt-exam-title tn-text-bold tn-margin-bottom">
							{{ item.type == 1 ? "[单选题] " : (item.type == 2 ? "[判断题] " : "[问答题] ") }}{{ (index + 1) + `、` + item.title + `(` + item.option_score + `分)` }}
							</view>
							<block v-if="item.second_title != ''">
								<view class="tn-margin-bottom-sm"><mp-html :content="item.second_title" /></view>
							</block>
							<view class="tt-exam-option tn-margin-bottom">
								<block v-for="(v, k) in item.options">
									<view class="tt-option" :key="index" v-if="item.type == 1">
										{{ v.check + `、` + v.title }}
									</view>
									<view class="tt-option" :key="index" v-else-if="item.type == 2">
										{{ v.option + `、` + v.title }}
									</view>
								</block>
							</view>
						</view>
						<view class="tn-padding-top tn-padding-bottom">
							<view class="tt-answer">
								<view class="tt-margin-right">试题答案：<text class="tn-color-green">{{ item.option_answer }}</text></view>
								<view>你的答案：<text class="tn-color-red">{{ item.user_answer }}</text></view>
							</view>
						</view>
						<view class="tn-padding-bottom">
							<view class="tt-answer">
								<view>试题解析：</view>
								<view class="tn-color-blue" @click="showExamAnsys(item)">查看解析</view>
							</view>
						</view>
						<!-- <view class="tn-padding-bottom">
							<view class="tt-answer">
								<view>试题反馈：</view>
								<view class="tn-color-blue" @click="showExamFeekFn(item)">反馈错误或提供更优答案</view>
							</view>
						</view>
						<view>
							<view class="tt-answer">
								<view>试题操作：</view>
								<view class="tn-color-blue tt-answer">
									<view class="tt-margin-right" @click="openExamNote(item)">
										添加笔记
									</view>
									<view class="tt-margin-right" @click="removeExam(item)">
										移除错题
									</view>
									<view class="tt-margin-right" @click="collectionExam(item)">
										试题收藏
									</view>
								</view>
							</view>
						</view> -->
					</view>
				</block>
			</view>
		</view>
		<!-- 试题列表结束 -->

		<!-- 试题解析开始 -->
		<tn-popup v-model="showExamAnsy" mode="center" width="90%" :customStyle="{height:'auto'}" closeIconSize="60" :closeBtn="false" borderRadius="6" @close="closeExamAnsys">
			<view class="tn-padding">
				<mp-html :content="examAnsy" />
			</view>
		</tn-popup>
		<!-- 试题解析结束 -->
		
		
		<!-- 试题反馈开始 -->
		<tn-popup v-model="showExamFeek" mode="center" width="90%" height="550" closeIconSize="60" :closeBtn="false" borderRadius="6" @close="closeExamAnsys">
			<view class="tn-padding">
				<tn-input type="textarea" maxLength="2000" border="true" borderColor="#FFA62D" height="400" placeholder="感谢你为该试题提供试题反馈,反馈采纳之后会获取一定的积分奖励哦..." />
				<view class="tn-margin-top">
					<tn-button backgroundColor="#FFA62D" width="100%" fontColor="tn-color-white">提 交 反 馈</tn-button>
				</view>
			</view>
		</tn-popup>
		<!-- 试题反馈结束 -->
		
		<!-- 添加笔记开始 -->
		<tn-popup v-model="showExamNote" mode="center" width="90%" height="550" closeIconSize="60" :closeBtn="false" borderRadius="6" @close="closeExamNote">
			<view class="tn-padding">
				<tn-input type="textarea" maxLength="2000" border="true" borderColor="#FFA62D" height="400" placeholder="添加一点笔记,方便复习使用..." />
				<view class="tn-margin-top">
					<tn-button backgroundColor="#FFA62D" width="100%" fontColor="tn-color-white">添 加 笔 记</tn-button>
				</view>
			</view>
		</tn-popup>
		<!-- 添加笔记结束 -->
		<view class="tn-tabbar-height"></view>
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import { getUserCollectionWrong, getOptionAnalysis } from "@/utils/api/exam.js"
	export default {
		name: 'TemplateDevice',
		mixins: [template_page_mixin],
		data() {
			return {
				showExamNote: false,
				showExamFeek: false,
				showExamAnsy: false,
				searchWhere: {
					uid: ""
				},
				examAnsy: "",
				examList: [],
			}
		},
		onLoad(options) {
			this.searchWhere.uid = options.uid || ""
			// #ifdef MP-WEIXIN
			this.$t.mpShare = {
				share: false
			}
			if (!this.$t.mpShare.share) {
				uni.hideShareMenu()
			}
			// #endif
		},
		onShow() {
			this.getUserCollectionWrong()
		},
		methods: {
			getUserCollectionWrong() {
				getUserCollectionWrong(this.searchWhere).then(res => {
					if (res.code == 100) {
						this.examList = res.data
						return
					}
					this.$func.showToast(res.msg)
				})
			},
			removeExam(item) {
				this.$func.showToast("移除成功")
			},
			collectionExam(item) {
				this.$func.showToast("收藏成功")
			},
			showExamAnsys(item) {
				getOptionAnalysis({uid:item.uid, type: parseInt(item.type)}).then(res => {
					if (res.code === 100) {
						if (res.data === "") {
							this.$func.showToast("此题暂无解析")
						} else {
							this.examAnsy = res.data
							this.showExamAnsy = true
						}
						return
					}
					this.$func.showToast(res.msg)
				})
			},
			closeExamAnsys() {
				this.showExamAnsy = false
			},
			showExamFeekFn(item) {
				this.showExamFeek = true
			},
			openExamNote(item) {
				this.showExamNote = true
			},
			closeExamNote() {
				this.showExamNote = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/scss/custom_nav_bar.scss';

	.tt-exam-container {
		background-color: #F2F0F0;
		// width: 100%;
	}

	.tt-exam-title {
		line-height: 40rpx;
	}

	.tt-option {
		line-height: 50rpx;
	}

	.tt-answer {
		display: flex;
	}

	.tt-color-orangey {
		color: #FFA62D;
	}

	.tt-margin-right {
		margin-right: 30rpx;
	}
	
	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 30rpx;
		height: calc(40rpx + env(safe-area-inset-bottom) / 2);
		height: calc(40rpx + constant(safe-area-inset-bottom));
	}
</style>